<template>
  <div class="animated-menu-tree">
    <el-tree
      :data="treeData"
      :props="{ label: 'menuName', children: 'children' }"
      :expand-on-click-node="false"
      :default-expand-all="defaultExpandAll"
      :accordion="accordion"
      node-key="id"
      ref="treeRef"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
      class="custom-tree"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <div class="node-main-content">
            <div class="node-left">
              <el-icon v-if="data.icon" class="node-icon">
                <component :is="data.icon" />
              </el-icon>
              <span class="node-name">{{ data.menuName }}</span>
            </div>
            <div class="node-right">
              <el-tag 
                :type="getMenuTypeTagType(data.menuType)"
                size="small"
                class="type-tag"
              >
                {{ getMenuTypeText(data.menuType) }}
              </el-tag>
              <el-tag 
                :type="data.status === 1 ? 'success' : 'danger'"
                size="small"
                class="status-tag"
              >
                {{ data.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </div>
          </div>
          <div v-if="showDetails(data)" class="node-details-section">
            <div class="details-grid">
              <div v-if="data.menuCode" class="detail-item">
                <span class="label">编码:</span>
                <span class="value">{{ data.menuCode }}</span>
              </div>
              <div v-if="data.path" class="detail-item">
                <span class="label">路径:</span>
                <span class="value">{{ data.path }}</span>
              </div>
              <div v-if="data.component" class="detail-item">
                <span class="label">组件:</span>
                <span class="value">{{ data.component }}</span>
              </div>
              <div v-if="data.description" class="detail-item description-item">
                <span class="label">说明:</span>
                <span class="value">{{ data.description }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'

const props = defineProps({
  treeData: {
    type: Array,
    default: () => []
  },
  defaultExpandAll: {
    type: Boolean,
    default: true
  },
  accordion: {
    type: Boolean,
    default: false
  }
})

const treeRef = ref()

// 节点展开事件
const handleNodeExpand = (data, node) => {
  console.log('节点展开:', data.menuName)
}

// 节点收缩事件
const handleNodeCollapse = (data, node) => {
  console.log('节点收缩:', data.menuName)
}

// 获取菜单类型标签类型
const getMenuTypeTagType = (type) => {
  switch (type) {
    case 'DIRECTORY':
      return 'warning'
    case 'MENU':
      return 'primary'
    case 'BUTTON':
      return 'success'
    default:
      return 'info'
  }
}

// 获取菜单类型文本
const getMenuTypeText = (type) => {
  switch (type) {
    case 'DIRECTORY':
      return '目录'
    case 'MENU':
      return '菜单'
    case 'BUTTON':
      return '按钮'
    default:
      return '未知'
  }
}

// 判断是否显示详细信息
const showDetails = (data) => {
  return data.menuCode || data.path || data.component || data.description
}
</script>

<style scoped>
.animated-menu-tree {
  width: 100%;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.custom-tree {
  background: transparent;
  
  :deep(.el-tree-node) {
    position: relative;
    margin-bottom: 2px;
  }
  
  :deep(.el-tree-node__content) {
    height: auto;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    transition: all 0.3s ease;
  }
  
  :deep(.el-tree-node__content:hover) {
    background-color: rgba(64, 158, 255, 0.05);
  }
  
  :deep(.el-tree-node__expand-icon) {
    color: #409EFF;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-right: 8px;
  }
  
  :deep(.el-tree-node__expand-icon.expanded) {
    transform: rotate(90deg);
  }
  
  :deep(.el-tree-node__expand-icon:hover) {
    color: #66b1ff;
    transform: scale(1.2);
  }
  
  :deep(.el-tree-node__children) {
    margin-left: 20px;
    border-left: 2px solid #f0f0f0;
    padding-left: 12px;
    margin-top: 8px;
  }
}

/* 自定义树节点样式 */
.custom-tree-node {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-bottom: 8px;
  background: white;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.custom-tree-node:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
  transform: translateY(-1px);
}

/* 主要内容区域 */
.node-main-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.node-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.node-icon {
  color: #409EFF;
  font-size: 16px;
  transition: all 0.3s ease;
}

.custom-tree-node:hover .node-icon {
  color: #66b1ff;
  transform: scale(1.1);
}

.node-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  transition: color 0.3s ease;
}

.custom-tree-node:hover .node-name {
  color: #409EFF;
}

.node-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.type-tag,
.status-tag {
  transition: all 0.3s ease;
}

.type-tag:hover,
.status-tag:hover {
  transform: scale(1.05);
}

/* 详细信息区域 */
.node-details-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  border-radius: 6px;
  padding: 12px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.detail-item.description-item {
  grid-column: 1 / -1;
}

.detail-item .label {
  color: #666;
  font-weight: 500;
  min-width: 40px;
  flex-shrink: 0;
}

.detail-item .value {
  color: #333;
  background: white;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 11px;
  word-break: break-all;
  flex: 1;
}

/* 层级缩进样式 */
.custom-tree :deep(.el-tree-node__children) {
  position: relative;
}

.custom-tree :deep(.el-tree-node__children::before) {
  content: '';
  position: absolute;
  left: -14px;
  top: -8px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #409EFF, transparent);
}

/* 动画效果 */
@keyframes slideDown {
  0% {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    max-height: 1000px;
    transform: translateY(0);
  }
}

.custom-tree :deep(.el-tree-node.is-expanded > .el-tree-node__children) {
  animation: slideDown 0.4s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .node-main-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .node-right {
    align-self: flex-end;
  }
  
  .details-grid {
    grid-template-columns: 1fr;
  }
  
  .custom-tree-node {
    padding: 10px 12px;
  }
  
  .node-details-section {
    margin-top: 8px;
    padding: 8px;
  }
}

/* 小屏幕适配 */
@media (max-width: 480px) {
  .custom-tree :deep(.el-tree-node__children) {
    margin-left: 12px;
    padding-left: 8px;
  }
  
  .detail-item {
    flex-direction: column;
    gap: 4px;
  }
  
  .detail-item .label {
    min-width: auto;
  }
}
</style> 